<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!-- 第一种方式：数据中心数据变化，页面也会进行渲染 -->
    <h2>用户数据: {{ $store.state.userInfo }}</h2>

    <!-- 第二种方式：直接将数据中心的值，初始化到组件内部数据中 -->
    <h2>用户数据: {{ user }}</h2>

    <!-- 第三种方式：直接将数据中心的值，初始化到组件内部计算属性中 -->
    <h2>用户数据: {{ userInfo2 }}</h2>

    <!-- 第四种方式：辅助函数 mapState -->
    <h2>用户数据: {{ userInfo }}</h2>
    <h2>用户数据: {{ userInfo3 }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'

// const result = mapState(['userInfo'])

// console.log(result)

export default {
  name: 'About',
  data() {
    return {
      user: this.$store.state.userInfo
    }
  },
  computed: {
    userInfo2: function() {
      const userInfo = this.$store.state.userInfo

      return `${userInfo.name} - ${userInfo.age}`
    },
    ...mapState(['userInfo']),
    ...mapState({
      'userInfo3': 'userInfo'
    })
  }
}
</script>